<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
<div id="fa836014189a4e39b0076162b9b3301e" class="chart-container" style="width:900px; height:500px;"></div>
<script>
    var chart_fa836014189a4e39b0076162b9b3301e = echarts.init(
        document.getElementById('fa836014189a4e39b0076162b9b3301e'), 'white', {renderer: 'canvas'});
    var option_fa836014189a4e39b0076162b9b3301e = {
        "animation": true,
        "animationThreshold": 2000,
        "animationDuration": 1000,
        "animationEasing": "cubicOut",
        "animationDelay": 0,
        "animationDurationUpdate": 300,
        "animationEasingUpdate": "cubicOut",
        "animationDelayUpdate": 0,
        "color": [
            "#c23531",
            "#2f4554",
            "#61a0a8",
            "#d48265",
            "#749f83",
            "#ca8622",
            "#bda29a",
            "#6e7074",
            "#546570",
            "#c4ccd3",
            "#f05b72",
            "#ef5b9c",
            "#f47920",
            "#905a3d",
            "#fab27b",
            "#2a5caa",
            "#444693",
            "#726930",
            "#b2d235",
            "#6d8346",
            "#ac6767",
            "#1d953f",
            "#6950a1",
            "#918597"
        ],
        "series": [
            {
                "type": "bar",
                "name": "\u5546\u5bb6A",
                "data": [
                    101,
                    82,
                    74,
                    46,
                    88,
                    90,
                    68
                ],
                "barCategoryGap": "20%",
                "label": {
                    "show": true,
                    "position": "top",
                    "margin": 8
                }
            },
            {
                "type": "bar",
                "name": "\u5546\u5bb6B",
                "data": [
                    104,
                    87,
                    98,
                    134,
                    37,
                    33,
                    106
                ],
                "barCategoryGap": "20%",
                "label": {
                    "show": true,
                    "position": "top",
                    "margin": 8
                }
            }
        ],
        "legend": [
            {
                "data": [
                    "\u5546\u5bb6A",
                    "\u5546\u5bb6B"
                ],
                "selected": {
                    "\u5546\u5bb6A": true,
                    "\u5546\u5bb6B": true
                },
                "show": true,
                "padding": 5,
                "itemGap": 10,
                "itemWidth": 25,
                "itemHeight": 14
            }
        ],
        "tooltip": {
            "show": true,
            "trigger": "item",
            "triggerOn": "mousemove|click",
            "axisPointer": {
                "type": "line"
            },
            "textStyle": {
                "fontSize": 14
            },
            "borderWidth": 0
        },
        "xAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                },
                "data": [
                    "\u5468\u4e00",
                    "\u5468\u4e8c",
                    "\u5468\u4e09",
                    "\u5468\u56db",
                    "\u5468\u4e94",
                    "\u5468\u516d",
                    "\u5468\u65e5"
                ]
            }
        ],
        "yAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                }
            }
        ],
        "title": [
            {
                "text": "Graphic\u7ec4\u4ef6\u793a\u4f8b",
                "padding": 5,
                "itemGap": 10
            }
        ],
        "graphic": [
            {
                "type": "group",
                "diffChildrenByName": false,
                "children": [
                    {
                        "type": "rect",
                        "$action": "merge",
                        "rotation": 0,
                        "left": "center",
                        "top": "center",
                        "bounding": "all",
                        "z": 100,
                        "zlevel": 0,
                        "silent": false,
                        "invisible": false,
                        "ignore": false,
                        "cursor": "pointer",
                        "draggable": false,
                        "progressive": false,
                        "width": 0,
                        "height": 0,
                        "shape": {
                            "x": 0,
                            "y": 0,
                            "width": 400,
                            "height": 50
                        },
                        "style": {
                            "fill": "rgba(0,0,0,0.3)",
                            "line_width": 0
                        }
                    },
                    {
                        "type": "text",
                        "$action": "merge",
                        "rotation": 0,
                        "left": "center",
                        "top": "center",
                        "bounding": "all",
                        "z": 100,
                        "zlevel": 0,
                        "silent": false,
                        "invisible": false,
                        "ignore": false,
                        "cursor": "pointer",
                        "draggable": false,
                        "progressive": false,
                        "width": 0,
                        "height": 0,
                        "style": {
                            "text": "\u81ea\u5b9a\u4e49\u7684\u7ec4\u4ef6",
                            "x": 0,
                            "y": 0,
                            "font": "bold 26px Microsoft YaHei",
                            "textAlign": "left",
                            "fill": "#fff",
                            "line_width": 0
                        }
                    }
                ],
                "$action": "merge",
                "rotation": Math.PI / 4,
                "right": 110,
                "bottom": 110,
                "bounding": "raw",
                "z": 100,
                "zlevel": 0,
                "silent": false,
                "invisible": false,
                "ignore": false,
                "cursor": "pointer",
                "draggable": false,
                "progressive": false,
                "width": 0,
                "height": 0
            }
        ]
    };
    chart_fa836014189a4e39b0076162b9b3301e.setOption(option_fa836014189a4e39b0076162b9b3301e);
</script>
</body>
</html>
